<template>
  <div class="message-outer">
    <div class="box-hd">
      <h1 class="title">消息通知</h1>
      <div class="more clearfix">
        <ul @click="clickChange">
          <li
            class="first"
            :class="{ active: type === 1 }">
            <a
              data-type="1"
              href="javascript:;">
              全部消息
            </a>
            <span class="m-num"></span>
          </li>
          <li :class="{ active: type === 2 }">
            <a
              data-type="2"
              href="javascript:;">
              物流动态
            </a>
          </li>
          <li :class="{ active: type === 3 }">
            <a
              data-type="3"
              href="javascript:;">
              特惠活动
            </a>
          </li>
        </ul>
      </div>
    </div>
    <div class="box-bd">
      <div
        class="empty"
        type="all">
        暂无数据
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()
const type = ref<number>(Number(route.query.type) || 1)
const clickChange = (e: MouseEvent) => {
  if ((e.target as HTMLElement).nodeName.toLocaleLowerCase() === 'a') {
    type.value = Number((e.target as HTMLElement).dataset.type)
  }
}
</script>

<style lang="less" scoped>
.active {
  a {
    color: #ff6700 !important;
  }
}
.message-outer {
  .box-hd {
    .title {
      margin: 0;
      font-size: 30px;
      font-weight: 400;
      line-height: 68px;
      color: #757575;
    }
    .more {
      border-bottom: 1px solid #e0e0e0;
      ul {
        float: left;
        margin: 0;
        padding: 18px 0;
        list-style-type: none;
        font-size: 16px;
        line-height: 1.25;
        li {
          float: left;
          padding: 0 20px;
          border-left: 1px solid #e0e0e0;
          color: #757575;
        }
        .first {
          padding-left: 0;
          border-left: 0;
        }
      }
    }
  }
  .box-bd {
    .empty {
      margin: 40px 0;
      font-size: 18px;
      text-align: center;
      color: #b0b0b0;
    }
  }
}
</style>
